<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2025/6/19
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<%--<!-- 引入 layui.css -->--%>
<%--<link href="//unpkg.com/layui@2.11.3/dist/css/layui.css" rel="stylesheet">--%>
<%--<!-- 引入 layui.js -->--%>
<%--<script src="//unpkg.com/layui@2.11.3/dist/layui.js"></script>--%>
<%--<html>--%>
<head>
    <title>Title</title>
</head>
<style>
    html{
        height: 100%;
        font-size: 1.1rem;
    }
    body{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body,.layout{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .layout{
        width: 500px;
        height: 400px;
        border: 5px solid white;
        border-radius: 20px;
        box-shadow: 0 0 30px #d9d9d9;
        background-color: rgba(173, 248, 255, 0.8);
        flex-direction: column;
        align-items: center;
    }
    .form-box{
        /*border: 1px solid;*/
    }
    .form-box>div{
        display: flex;
        justify-content: end;
        align-items: center;
        margin-left: auto;
        margin-top: 1rem;
    }
    .form-box>div>input,.form-box>div>select{
        width: 300px;
        height: 32px;
        margin-left: 1rem;
        font-size: 0.8rem;
    }
    .btn{
        width: 100px;
        height: 32px;
        background-color: white;
        border: 2px solid #98e3ff;
        transition: 200ms;
        transform: scale(1);
    }
    .btn:hover{
        background-color: #98e3ff;
        border: 2px solid white;
        color: white;
        transform: scale(0.9);
    }
</style>
<body>
    <div class="layout">
        <div class="form-box">
            <div>
                <span>订单编号:</span>
                <input style="color: #7d7d7d" type="text" name="order_number" readonly="readonly">
            </div>
            <div>
                <span>客户姓名:</span>
                <input style="color: #7d7d7d" readonly="readonly" type="text" name="client_name">
            </div>
            <div>
                <span>房间名称:</span>
                <select id="room-select" onchange="aaa()" name="room_name">
                    <option id="room-zero" value="0">请选择</option>
                </select>
            </div>
            <div>
                <span>房间号:</span>
                <select id="roomnumber-select" name="roomNumber">
                    <option id="zero" value="0">请选择</option>
                </select>
            </div>
            <div>
                <button class="btn" style="margin: 0 auto;" onclick="OrderAndRoomStatusUpdate()">修改</button>
            </div>
        </div>
    </div>
</body>
<script>
    <%--var orderIdGet=${param.orderId};--%>
    var orderIdGet=73;
    RoomQueryAll();
    orderQueryById();
    function orderQueryById() {
        $.ajax( {
            "url"          :  "OrderQueryByIdServlet",
            "type"         :  "get",
            "data"         :  {"orderIdGet":orderIdGet},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var order=JSON.parse(result);
                $("input[name='order_number']").val(order.order_number);
                $("input[name='client_name']").val(order.client.client_name);
                $("select[name='room_name']").val(order.orderDetails.room.room_id);
                let id=order.orderDetails.room.room_id;
                RoomNumQueryByRoomId(id);
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    function RoomNumQueryByRoomId(id) {
        $.ajax( {
            "url"          :  "RoomNumQueryByRoomIdServlet",
            "type"         :  "get",
            "data"         :  {"roomId":id},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var roomNumList=JSON.parse(result);
                console.log(roomNumList);
                var temp="";
                for (var rn in roomNumList){
                    temp+=`
                     <option value="\${roomNumList[rn].room_number_id}">\${roomNumList[rn].room_number_text}</option>
                    `
                }
                $("#zero").siblings().remove();
                $("#zero").after(temp);
                loadform();
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    //layui重新渲染
    function loadform() {
        layui.use('form', function(){
            var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
            form.render();
            //form.render();
        });
    }
    function OrderAndRoomStatusUpdate() {
        let data={};
        data.orderIdGet=orderIdGet;
        data.roomNumberGet=$("select[name='roomNumber']").val();
        data.roomNameGet=$("select[name='room_name']").val();
        $.ajax( {
            "url"          :  "OrderAndRoomStatusUpdateServlet",
            "type"         :  "post",
            "data"         :  data,
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                 if(result === 'success'){
                     alert("修改成功!")
                     window.location.href="";
                 }else {
                     alert("修改失败")
                 }
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    function RoomQueryAll() {
        $.ajax( {
            "url"          :  "RoomQueryAllServlet",
            "type"         :  "get",
            "data"         :   {},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var roomList=JSON.parse(result);
                console.log(roomList);
                var temp="";
                for (var r in roomList){
                    temp+=`
                     <option value="\${roomList[r].room_id}">\${roomList[r].room_name}</option>
                    `
                }
                $("#room-zero").siblings().remove();
                $("#room-zero").after(temp);
                loadform();
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    function aaa(){
        let roomId=$("select[name='room_name']").val();
        RoomNumQueryByRoomId(roomId);
    }

</script>
</html>
